import React, { Component } from 'react';
import { connect } from 'dva';
import { List, Card , Form, Button, Icon, Input, message} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { Link } from 'react-router-dom';

@connect(state => {
  const {
    articles: { latest },
  } = state;
  return { latest };
})
class Latest extends Component {
  componentDidMount() {
    this.props.dispatch({
      type: 'articles/fetchLatest',
    });
  }

  //对文章列表进行删除.
  deleteArticle = e =>{
    const index = e.target.getAttribute("payload")
    const {latest} = this.props
    latest.splice(index, 1)
    this.setState({latest})
    message.info('删除成功！')
}

  itemRender = item => {
    const { id, title, content } = item;
    return (
      <div>
        <h2>
          <Link to={`/articles/show/${id}`}>{title}</Link>
        </h2>
        <p>{content}</p>
        <Form >
                    <Form.Item>
                        <Button style={{margin:15}} icon="delete" onClick={this.deleteArticle}>
                            删除
                        </Button>

                        <Button icon="edit">
                            <Link to={`/articles/edit/${id}`}>
                                修改文章
                            </Link>
                        </Button>
                    </Form.Item>

                </Form>
      </div>
    );
  };

  render() {
    const { latest } = this.props;
    return (
      <PageHeaderLayout title="最近文章" content="查看文章内容.">
        <Card bordered={false}>
          <List
            itemLayout="horizontal"
            dataSource={latest}
            header="文章列表"
            renderItem={this.itemRender}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}

export default Latest;
